<template>
  <!-- 导航栏 -->
  <van-nav-bar
    :title="TypeName"
    left-text="返回"
    left-arrow
    @click-left="back"
    @click-right="SearchShow = !SearchShow"
  >
  <template #right>
    <van-icon name="search" size="18" />
  </template>
  </van-nav-bar>

  <!-- 弹出框 -->
  <van-popup v-model:show="SearchShow" position="top">
    <van-search v-model="keywords" placeholder="请输入关键词" @search="search" />
  </van-popup>

  <!-- 下拉菜单 -->
  <van-dropdown-menu>
    <van-dropdown-item v-model="TypeActive" :options="TypeList" @change="TypeToggle" />
    <van-dropdown-item v-model="FlagActive" :options="FlagList" @change="FlagToggle" />
    <van-dropdown-item v-model="SortActive" :options="SortList" @change="SortToggle" />
    <van-dropdown-item v-model="ByActive" :options="ByList" @change="ByToggle" />
  </van-dropdown-menu>

  <!-- 下拉刷新 -->
  <van-pull-refresh v-model="refreshing" @refresh="refresh">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :offset="10"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="load"
    >
      <ul class="proul">
        <li v-for="(item, key) in list" :key="key">
          <router-link :to="{path: '/product/info', query: {proid: item.id}}">
            <img :src="item.thumb_text" />
          </router-link>
          <router-link :to="{path: '/product/info', query: {proid: item.id}}">
            <p class="tit">{{item.name}}</p>
          </router-link>
          <div class="price">
            <p>￥{{item.price}}</p>
          </div>
        </li>
      </ul>
    </van-list>
  </van-pull-refresh>

</template>

<script setup>
  const {proxy} = getCurrentInstance()

  const back = () => proxy.$router.go(-1)

  let TypeName = proxy.$route.query.hasOwnProperty('name') ? proxy.$route.query.name : '全部商品';
  TypeName = ref(TypeName)

  let SearchShow = ref(false)
  let keywords = ref('')

  // 筛选
  let TypeActive = proxy.$route.query.hasOwnProperty('typeid') ? proxy.$route.query.typeid : 0;
  TypeActive = parseInt(TypeActive)
  TypeActive = ref(TypeActive)
  let FlagActive = ref('0')  //标志 1-新品 2-热销 3-推荐
  let SortActive = ref('createtime') //排序 上架时间 价格 库存
  let ByActive = ref('desc')  //desc 降序 asc 升序
  

  //下拉刷新
  let list = ref([])
  let page = ref(1)
  let loading = ref(false)
  let finished = ref(false)
  let refreshing = ref(false)

  let FlagList = [
    {text: '全部商品', value: '0'},
    {text: '新品', value: '1'},
    {text: '热销', value: '2'},
    {text: '推荐', value: '3'},
  ];

  let TypeList = reactive([
    {text: '全部分类', value: 0},
  ]);

  let SortList = [
    {text: '按上架时间', value: 'createtime'},
    {text: '按价格', value: 'price'},
    {text: '按库存', value: 'stock'}
  ];

  let ByList = [
    {text: '降序', value: 'desc'},
    {text: '升序', value: 'asc'},
  ];

  //生命周期
  onBeforeMount(() => {
    load()
    type()
  })

  //分类切换
  const TypeToggle = async (value) =>
  {
    refreshing.value = true
    TypeActive.value = value
    refresh()
  }

  //属性切换
  const FlagToggle = async (value) =>
  {
    refreshing.value = true
    FlagActive.value = value
    refresh()
  }

  //排序切换
  const SortToggle = async (value) =>
  {
    refreshing.value = true
    SortActive.value = value
    refresh()
  }

  //升降序切换
  const ByToggle = async (value) =>
  {
    refreshing.value = true
    ByActive.value = value
    refresh()
  }

  //分类的请求
  const type = async () =>
  {
    var result = await proxy.$POST({
      url: '/index/type',
      params: {}
    })

    if(result.code == 0)
    {
      proxy.$fail(result.msg)
      return false
    }
    
    for(var item of result.data)
    {
      TypeList.push({
        text: item.name,
        value: item.id
      })
    }
  }

  const search = async () => 
  {
    SearchShow.value = false
    refreshing.value = true

    //触发刷新效果
    refresh()
  }

  //下拉刷新的方法
  const refresh = async () =>
  {
    //可以去掉定时器
    setTimeout(() => {
      page.value = 1
      list.value = []
      finished.value = false
      loading.value = true
      load()
    }, 2000)
  }

  //加载数据
  const load = async () => 
  {
    //如果刷新状态已经为true了，就要修改为false
    if(refreshing.value)
    {
      refreshing.value = false
    }

    //组装数据
    var data = {
      typeid: TypeActive.value,
      flag: FlagActive.value,
      sort: SortActive.value,
      by: ByActive.value,
      keywords: keywords.value,
      page:page.value
    }

    var result = await proxy.$POST({
      url: "/index/list",
      params: data
    })

    //请求发送完毕后，加载状态也就完毕了
    loading.value = false

    if(result.code == 0)
    {
      finished.value = true
    }else
    {
      list.value = list.value.concat(result.data.list)
      page.value++

      TypeName.value = result.data.TypeName
    }

  }


</script>


<style>
  ul.proul{
    margin-bottom: 30px;
  }
</style>